<template>
  <div>
    <Film-list-top-nav :class="fixed ? 'fixed' : ''"></Film-list-top-nav>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import FilmListTopNav from "@/components/FilmListTopNav";

let fixed=ref(false)

onMounted(()=>{
    window.addEventListener("scroll", (e) => {
      let top = document.documentElement.scrollTop;
      if (top < 130) fixed.value = false;
      else fixed.value = true;
    });
  })

</script>

<style lang="less" scoped>
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #fff;
}
</style>
